<template>
    <div :style="{ height: 300 + 'px' }">
        <div class="title" v-if="data.title">{{ data.title }}</div>
        <div v-if="show">
            <div v-if="data.data && data.data.length > 0" class="product" :class="className || 'one'">
                <div class="product-item" v-for="(item, index) in data.data" :key="index">
                    <div class="image">
                        <img :src="item.img">
                    </div>
                    <div class="info">
                        <p class="name">{{ item.name }}</p>
                        <p class="num">
                            {{ options.volumeStr ? item.sales + ' 已购买' : '' }} {{ line }} {{ options.goodRatio ?
                                item.stock + '库存' : '' }}
                        </p>
                        <p class="price">
                            <span>￥{{ item.price }}</span>
                            <span v-if="options.originalPrice">￥{{ item.market }}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div v-else class="product" :class="className || 'one'">
                <div class="product-item product-default" ref="root" v-for="(item, index) in productList" :key="index">
                    <div class="image">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="info">
                        <p class="name">{{ item.productName }}</p>
                        <!-- <p class="num">
                     {{options.volumeStr ? ' 12124 已购买':''}} {{ line }} {{ options.goodRatio ? '99库存' : '' }}
                  </p> -->
                        <div style="display: flex; justify-content: space-between ;align-items: flex-end;">
                            <p class="price">
                                <span>￥{{ item.productPrice }}</span>
                                <span v-if="options.originalPrice">￥{{ item.originalPrice }}</span>
                            </p>
                            <p style="font-size: 10px;margin: 0;color: #b5b5b5;"> {{ options.volumeStr ? '已购买12124' : ''
                                }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Product',
    props: ['data', 'className'],
    computed: {
        options() {
            return this.data.options
        },
        line() {
            return this.options.volumeStr && this.options.goodRatio ? '| ' : ''
        }
    },
    data() {
        return {
            show: false,
            productList: [
                {
                    "productId": 3601,
                    "productName": "驼大大新疆正宗骆驼奶粉初乳骆驼乳粉蓝罐礼盒装120g*4罐",
                    "img": "https://pili-vod.guanxikeji.com/moban/img/1728877660381.png",
                    "productPrice": 299,
                    "originalPrice": 598,
                    "volumeStr": "741",
                    "goodRatio": 98
                },
                {
                    "productId": 3268,
                    "productName": "百合28件套新骨质瓷餐具",
                    "img": "https://pili-vod.guanxikeji.com/moban/img/1728877660381.png",
                    "productPrice": 370,
                    "originalPrice": 1388,
                    "volumeStr": "400",
                    "goodRatio": 99
                },

            ]
        }
    },
    watch: {
        data: {
            handler(newData, oldData) {
                this.$nextTick(() => {
                    const el = this.$refs.root
                    el.forEach(item => {
                        let rows = Math.ceil(item.clientHeight / 5) + 2
                        item.style['gridRowEnd'] = `span ${rows}`
                    })
                })
            },
            // 开启深度监听
            deep: true
        }
    },
    mounted() {

        setTimeout(() => {
            this.show = true
        }, 100)
    }

}
</script>

<style scoped lang="scss">
.title {
    margin: 10px 0 0 10px;
    font-weight: bold;
    font-size: 16px;
    color: #000000;
    letter-spacing: 10px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.product {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;
    box-sizing: border-box;

    * {
        box-sizing: border-box;
    }

    &.one .product-item {
        width: 100%;
        padding: 10px;
        display: flex;
        border-bottom: 1px dashed #eee;
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 10px;

        .image {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 10px;
        }

        .info {
            padding: 0 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;

            .price {
                font-size: 20px;
                margin: 0;
            }

            .num {
                margin: 12px 0 0;
            }

            .name {
                font-size: 14px;
                margin: 0;
                color: #333;
                text-overflow: ellipsis;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                height: 19px;
                line-height: 18px;
            }

            .num {
                font-size: 12px;
                color: #d23000;
                font-weight: 600;
            }

            .price {
                font-weight: 600;
                margin: 12px 0 0;
                font-size: 18px;

                span:nth-of-type(1) {
                    color: red;
                }

                span:nth-of-type(2) {
                    color: #b5b5b5;
                    font-weight: 400;
                    font-size: 12px;
                    margin-left: 4px;
                    text-decoration: line-through;
                }
            }
        }
    }

    &.two .product-item {
        margin: 0.5%;
        width: 49%;
        padding: 5px;
        background-color: #fff;
        border-radius: 5px;

        &.product-default:nth-of-type(3) {
            display: none;
        }

        .image {
            font-size: 0;

            img {
                max-width: 100%;
            }
        }

        .info {
            padding: 10px 5px 0;

            .name {
                font-size: 14px;
                margin: 0;
                color: #333;
                text-overflow: ellipsis;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                height: 19px;
                line-height: 18px;
            }

            .num {
                font-size: 12px;
                color: #d23000;
                font-weight: 600;
            }

            .price {
                font-weight: 600;
                margin: 12px 0 0;
                font-size: 18px;

                span:nth-of-type(1) {
                    color: red;
                }

                span:nth-of-type(2) {
                    color: #b5b5b5;
                    font-weight: 400;
                    font-size: 12px;
                    margin-left: 4px;
                    text-decoration: line-through;
                }
            }
        }
    }

    &.three {
        text-align: left;
        min-height: 100px;
        width: 100%;
        display: grid;
        grid-auto-rows: 5px;
        grid-template-columns: repeat(auto-fill, calc(50% - 10px));
        align-items: start;
        justify-content: space-around;
    }

    &.three .product-item {
        /* margin: 0.5%; */
        width: 100%;
        padding: 5px;
        background-color: #fff;
        border-radius: 5px;

        &.product-default:nth-of-type(3) {
            display: none;
        }

        .image {
            font-size: 0;

            img {
                max-width: 100%;
            }
        }

        .info {
            padding: 10px 5px 0;

            .name {
                font-size: 14px;
                margin: 0;
                color: #333;
                /* text-overflow: ellipsis;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              height: 19px;
              line-height: 18px; */
            }

            .num {
                font-size: 12px;
                color: #d23000;
                font-weight: 600;
            }

            .price {
                font-weight: 600;
                margin: 12px 0 0;
                font-size: 18px;

                span:nth-of-type(1) {
                    color: red;
                }

                span:nth-of-type(2) {
                    color: #b5b5b5;
                    font-weight: 400;
                    font-size: 12px;
                    margin-left: 4px;
                    text-decoration: line-through;
                }
            }
        }
    }

}
</style>
